<template>
  <uni-popup ref="popupRef" type="bottom" background-color="#fff">
    <view class="filter-modal">
      <view class="modal-header">
        <view class="tab-bar">
          <view
            class="tab-item"
            :class="{ active: activeTab === 'income' }"
            @click="switchTab('income')"
          >
            <text>收入</text>
          </view>
          <view
            class="tab-item"
            :class="{ active: activeTab === 'expense' }"
            @click="switchTab('expense')"
          >
            <text>支出</text>
          </view>
        </view>
        <uni-icons
          type="closeempty"
          size="20"
          color="#666"
          @click="close"
        ></uni-icons>
      </view>
      <view class="filter-content">
        <view class="filter-tags">
          <view
            v-for="tag in currentTags"
            :key="tag.value"
            class="filter-tag"
            :class="{ active: localSelectedTags.includes(tag.value) }"
            @click="toggleTag(tag.value)"
          >
            {{ tag.label }}
          </view>
        </view>
      </view>
      <view class="modal-footer">
        <view class="footer-btn btn-reset" @click="handleReset">
          <text>重置</text>
        </view>
        <view class="footer-btn btn-confirm" @click="handleConfirm">
          <text>确认</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, computed } from "vue";

// Emits
const emit = defineEmits(["confirm"]);

// 弹窗引用
const popupRef = ref(null);

// 当前激活的 tab
const activeTab = ref("income");

// 收入标签
const incomeTags = ref([
  { label: "充值", value: "recharge" },
  { label: "扫码收款", value: "scan" },
  { label: "外卖收款", value: "takeout" },
  { label: "到店订单收入", value: "store" },
  { label: "自提订单收入", value: "pickup" },
  { label: "线下汇款收入", value: "offline" },
  { label: "代理订单收入", value: "agent" },
  { label: "POS订单收入", value: "pos" },
]);

// 支出标签
const expenseTags = ref([
  { label: "提现", value: "withdraw" },
  { label: "扫码订单退款", value: "scan_refund" },
  { label: "外卖订单退款", value: "takeout_refund" },
  { label: "到店订单退款", value: "store_refund" },
  { label: "自提订单退款", value: "pickup_refund" },
  { label: "代销订单退款", value: "agent_refund" },
  { label: "备用金提现", value: "reserve_withdraw" },
  { label: "POS订单退款", value: "pos_refund" },
]);

// 当前显示的标签
const currentTags = computed(() => {
  return activeTab.value === "income" ? incomeTags.value : expenseTags.value;
});

// 本地选中的标签
const localSelectedTags = ref([]);

// 切换 tab
const switchTab = (tab) => {
  activeTab.value = tab;
  // 切换 tab 时清空已选标签
  localSelectedTags.value = [];
};

// 打开弹窗
const open = () => {
  popupRef.value.open();
};

// 关闭弹窗
const close = () => {
  popupRef.value.close();
};

// 切换标签选择
const toggleTag = (value) => {
  const index = localSelectedTags.value.indexOf(value);
  if (index > -1) {
    localSelectedTags.value.splice(index, 1);
  } else {
    localSelectedTags.value.push(value);
  }
};

// 重置筛选
const handleReset = () => {
  localSelectedTags.value = [];
};

// 确认筛选
const handleConfirm = () => {
  emit("confirm", {
    type: activeTab.value,
    tags: [...localSelectedTags.value],
  });
  close();
};

// 暴露方法
defineExpose({
  open,
  close,
});
</script>

<style lang="scss" scoped>
.filter-modal {
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 40rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.tab-bar {
  display: flex;
  gap: 40rpx;
}

.tab-item {
  position: relative;
  padding: 10rpx 0;
  font-size: 32rpx;
  color: #999;
  cursor: pointer;

  &.active {
    color: #333;
    font-weight: 600;

    &::after {
      content: "";
      position: absolute;
      bottom: -20rpx;
      left: 50%;
      transform: translateX(-50%);
      width: 40rpx;
      height: 4rpx;
      background-color: #ffb200;
      border-radius: 2rpx;
    }
  }

  &:active {
    opacity: 0.7;
  }
}

.filter-content {
  padding: 30rpx 40rpx;
  min-height: 400rpx;
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 20rpx;
}

.filter-tag {
  padding: 16rpx 20rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  text-align: center;
  font-size: 26rpx;
  color: #666;
  border: 2rpx solid transparent;

  &.active {
    background-color: #fff7e6;
    color: #ffb200;
    border-color: #ffb200;
  }

  &:active {
    opacity: 0.7;
  }
}

.modal-footer {
  display: flex;
  gap: 20rpx;
  padding: 20rpx 40rpx;
  border-top: 1rpx solid #f0f0f0;
}

.footer-btn {
  flex: 1;
  padding: 20rpx;
  border-radius: 50rpx;
  text-align: center;
  font-size: 32rpx;
  font-weight: 600;

  &:active {
    opacity: 0.8;
  }
}

.btn-reset {
  color: #666;
  border: 2rpx solid #d9d9d9;
}

.btn-confirm {
  color: #fff;
  background-color: #ffb200;
}
</style>
